<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>FusionCharts v3 Documentation</title>
		<link rel="stylesheet" href="Style.css" type="text/css" />
	</head>
	<body>
		<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
			<tr>
				<td><h2 class="pageHeader">Using FusionCharts with ASP.NET(VB.NET) &gt; Creating Drill-down 
						charts
					</h2>
				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In our previous example, we had used FusionCharts to 
						plot a chart using data stored in database. We'll now extend that example 
						itself to create a drill-down chart which can show more information.</p>
					<p>If you recall from previous example, we were showing the sum of factory output 
						in a pie chart as under:
					</p>
				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><img src="Images/Code_DBOut.jpg" width="572" height="273" class="imageBorder" /></td>
			</tr>
			<tr>
				<td valign="top" class="text">In this example, we'll extend this example, so that 
					when a user clicks on a pie slice for a factory, he can drill down to see date 
					wise production for that factory.
				</td>
			</tr>
			<tr>
				<td valign="top" class="text">&nbsp;</td>
			</tr>
			<tr>
				<td valign="top" class="header">Setting up the pie chart for Link
				</td>
			</tr>
			<tr>
				<td valign="top" class="text">To set up the pie chart to enable links for 
					drill-down involves just minor tweaking of our previous
					<span class="codeInline">BasicDBExample.aspx</span>. We basically need to add 
					the
					<span class="codeInline">link</span>
					attribute for each<span class="codeInline"> &lt;set&gt;</span>
					element. We create a new page
					<span class="codeInline">Default.aspx</span>
					from the previous page in
					<span class="codeInline">DBExample</span>
					folder with the following code changes:</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock"><p>&lt;%@ Page language=&quot;vb&quot; Codebehind=&quot;Default.aspx.vb&quot; AutoEventWireup=&quot;false&quot; Inherits=&quot;InfoSoftGlobal.InfoSoftGlobal.GeneralPages.ASP.NET.DBExample._Default&quot; %&gt;<br />
				  &lt;HTML&gt;<br>
						&lt;HEAD&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Database Example &lt;/TITLE&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE="Javascript" 
						SRC="../../FusionCharts/FusionCharts.js"&gt;&lt;/SCRIPT&gt;<br>
						&lt;/HEAD&gt;<br>
						&lt;body&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;form id='form1' name='form1' method='post' runat=&quot;server&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;<strong>&nbsp;&nbsp;&nbsp;&lt;%=GetFactorySummaryChartHtml()%&gt;</strong><br />
&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br />
&lt;/body&gt;<br>
						&lt;/HTML&gt;<br>
						<br>
						<br>
						<strong>Public Function GetFactorySummaryChartHtml() As String</strong>&nbsp;&nbsp;<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'xmlData will be used to store the entire XML document generated</span><br />
&nbsp;&nbsp;&nbsp;Dim xmlData As String<br />
&nbsp;&nbsp;&nbsp;<span class="codeComment">'We also keep a flag to specify whether we've to animate the chart or not.<br />
&nbsp;&nbsp;&nbsp;'If the user is viewing the detailed chart and comes back to this page, he shouldn't<br />
&nbsp;&nbsp;&nbsp;'see the animation again.</span><br />
&nbsp;&nbsp;&nbsp;Dim animateChart As String<br />
&nbsp;&nbsp;&nbsp;animateChart = Request.QueryString(&quot;animate&quot;)<br />
&nbsp;<span class="codeComment">&nbsp;&nbsp;'Set default value of 1</span><br />
&nbsp;&nbsp;&nbsp;If ((Not (animateChart) Is Nothing) _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AndAlso (animateChart.Length = 0)) Then<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animateChart = &quot;1&quot;<br />
&nbsp;&nbsp;&nbsp;End If<br />
&nbsp;&nbsp;&nbsp;<span class="codeComment">'Generate the chart element</span><br />
&nbsp;&nbsp;&nbsp;xmlData = (&quot;&lt;chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' &nbsp;&nbsp;&nbsp;showBorder='1' for&quot; &amp; _<br />
&nbsp;&nbsp;&nbsp;&quot;matNumberScale='0' numberSuffix=' Units' animation=' &quot; _<br />
&nbsp;&nbsp;&nbsp;&amp; (animateChart &amp; &quot;'&gt;&quot;))<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Iterate through each factory</span><br />
&nbsp;&nbsp;&nbsp;Dim factoryQuery As String = &quot;select * from Factory_Master&quot;<br />
&nbsp;&nbsp;&nbsp;Dim connection As OdbcConnection = DbHelper.Connection(DbHelper.ConnectionStringFactory)<br />
&nbsp;&nbsp;&nbsp;Dim factoryCommand As OdbcCommand = New OdbcCommand(factoryQuery, connection)<br />
&nbsp;&nbsp;&nbsp;Dim adapter As OdbcDataAdapter = New OdbcDataAdapter(factoryCommand)<br />
&nbsp;&nbsp;&nbsp;Dim table As DataTable = New DataTable<br />
&nbsp;&nbsp;&nbsp;adapter.Fill(table)<br />
&nbsp;&nbsp;&nbsp;For Each row As DataRow In table.Rows<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dim quantityQuery As String = (&quot;select sum(Quantity) as TotOutput from Factory_Output where FactoryId=&quot; &amp; row(&quot;FactoryId&quot;))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dim quantityCommand As OdbcCommand = New OdbcCommand(quantityQuery, connection)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;xmlData = (xmlData &amp; (&quot;&lt;set label='&quot; _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (row(&quot;FactoryName&quot;).ToString &amp; (&quot;' value='&quot; _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (quantityCommand.ExecuteScalar.ToString &amp; (&quot;' link='&quot; _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (Server.UrlEncode((&quot;Detailed.aspx?FactoryId=&quot; &amp; row(&quot;FactoryId&quot;).ToString)) &amp; &quot;'/&gt;&quot;)))))))</strong><br />
&nbsp;&nbsp;&nbsp;Next<br />
&nbsp;&nbsp;&nbsp;connection.Close()<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Finally, close &lt;chart&gt; element</span><br />
&nbsp;&nbsp;&nbsp;xmlData = (xmlData &amp; &quot;&lt;/chart&gt;&quot;)<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Create the chart - Pie 3D Chart with data from xmlData</span><br />
&nbsp;&nbsp;&nbsp;<strong>Return FusionCharts.RenderChart(&quot;../../FusionCharts/Pie3D.swf&quot;, &quot;&quot;, xmlData, &quot;FactorySum&quot;, &quot;600&quot;, &quot;300&quot;, False, False)</strong><br />
End Function<br>
					</p>
				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>As you can see in the code above, we're doing the 
						following:</p>
					<ol>
						<li>
							Include
							<span class="codeInline">FusionCharts.js</span>
							JavaScript class to enable easy embedding of FusionCharts.</li>
						<li>
							We then open a connection to Access database.</li>
						<li>
							Thereafter, we generate the XML data in the <span class="codeInline">GetFactorySummaryChartHtml() </span>method document by 
							iterating through the recordset. We store the XML data in
							<span class="codeInline">xmlData</span>
							variable. To each
							<span class="codeInline">&lt;set&gt;</span>
							element, we add the
							<span class="codeInline">link</span>
							attribute, which points to
							<span class="codeInline">Detailed.aspx</span>
							- the page that contains the chart to show details. We pass the factory id of 
							the respective factory by appending it to the link. We finally URL Encode the 
							link, which is a very important step.						</li>
						<li>
							Finally, we render the chart using
							<span class="codeInline">RenderChart()</span>
							method and pass
							<span class="codeInline">xmlData</span>
							as
							<span class="codeInline">dataXML</span>.						</li>
					</ol>
					<p>Let's now shift our attention to
						<span class="codeInline">Detailed.aspx</span>
						page.
					</p>
				</td>
			</tr>
			<tr>
				<td valign="top" class="text">&nbsp;</td>
			</tr>
			<tr>
				<td valign="top" class="header">Creating the detailed data chart page
				</td>
			</tr>
			<tr>
				<td valign="top" class="text">The page
					<span class="codeInline">Detailed.aspx</span>
					contains the following code:
				</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock"><p>
						&lt;%@ Page language="c#" Codebehind="Detailed.aspx.vb" AutoEventWireup="false" 
						Inherits="InfoSoftGlobal.GeneralPages.ASP.NET.DBExample.Detailed" %&gt;<br>
						&lt;HTML&gt;<br>
						&lt;HEAD&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Database and Drill-Down Example &lt;/TITLE&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE="Javascript" 
						SRC="../../FusionCharts/FusionCharts.js"&gt;&lt;/SCRIPT&gt;<br>
						&lt;/HEAD&gt;<br>
						&lt;body&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;form id='form1' name='form1' method='post' runat=&quot;server&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&lt;%=GetFactoryDetailedChartHtml()%&gt;</strong><br />
&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br />
&lt;/body&gt;<br>
						&lt;/HTML&gt;<br>
						<br>
						<br>
						<strong>Public Function GetFactoryDetailedChartHtml() As String</strong><br />
&nbsp;<span class="codeComment">&nbsp;&nbsp;'This page is invoked from Default.aspx. When the user clicks on a pie<br />
&nbsp;&nbsp;&nbsp;'slice in Default.aspx, the factory Id is passed to this page. We need<br />
&nbsp;&nbsp;&nbsp;'to get that factory id, get information from database and then show<br />
&nbsp;&nbsp;&nbsp;'a detailed chart.<br />
&nbsp;&nbsp;&nbsp;'First, get the factory Id</span><br />
&nbsp;&nbsp;&nbsp;Dim factoryId As String<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Request the factory Id from Querystring</span><br />
&nbsp;&nbsp;&nbsp;factoryId = Request.QueryString(&quot;FactoryId&quot;)<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'xmlData will be used to store the entire XML document generated</span><br />
&nbsp;&nbsp;&nbsp;Dim xmlData As String<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Generate the chart element string</span><br />
&nbsp;&nbsp;&nbsp;xmlData = (&quot;&lt;chart palette='2' caption='Factory &quot; _<br />
&amp; (factoryId &amp; &quot; Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' &gt;&quot;))<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Now, we get the data for that factory</span><br />
&nbsp;&nbsp;&nbsp;Dim query As String = (&quot;select * from Factory_Output where FactoryId=&quot; &amp; factoryId)<br />
&nbsp;&nbsp;&nbsp;Dim connection As OdbcConnection = DbHelper.Connection(DbHelper.ConnectionStringFactory)<br />
&nbsp;&nbsp;&nbsp;Dim command As OdbcCommand = New OdbcCommand(query, connection)<br />
&nbsp;&nbsp;&nbsp;Dim reader As OdbcDataReader = command.ExecuteReader</p>
				  <p> &nbsp;&nbsp;&nbsp;While reader.Read<br />
				    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xmlData = (xmlData &amp; (&quot;&lt;set label='&quot; _<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (CType(reader(&quot;DatePro&quot;), DateTime).Day.ToString &amp; (&quot;/&quot; _<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (CType(reader(&quot;DatePro&quot;), DateTime).Month.ToString &amp; (&quot;' value='&quot; _<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (reader(&quot;Quantity&quot;).ToString &amp; &quot;'/&gt;&quot;)))))))</p>
				  <p> &nbsp;&nbsp;&nbsp;End While<br />
				    &nbsp;&nbsp;&nbsp;reader.Close()<br />
				    &nbsp;&nbsp;&nbsp;<span class="codeComment">'Close &lt;chart&gt; element</span><br />
				    &nbsp;&nbsp;&nbsp;xmlData = (xmlData &amp; &quot;&lt;/chart&gt;&quot;)<br />
				    &nbsp;&nbsp;<span class="codeComment">&nbsp;'Create the chart - Column 2D Chart with data from xmlData</span><br />
				    &nbsp;&nbsp;&nbsp;<strong>Return FusionCharts.RenderChart(&quot;../../FusionCharts/Column2D.swf&quot;, &quot;&quot;, xmlData, &quot;FactoryDetailed&quot;, &quot;600&quot;, &quot;300&quot;, False, False)</strong><br />
				    End Function</p></td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In this page, we're:</p>
					<ol>
						<li>
							Including
							<span class="codeInline">FusionCharts.js</span>
							JavaScript class to enable easy embedding of FusionCharts.</li>
						<li>
							Requesting the factory id for which we've to show detailed data. This data was 
							sent to us as querystring, as a part of pie chart link.</li>
						<li>
							We get the requisite data for this factory from database and then convert it 
							into XML using string concatenation.</li>
						<li>
							Finally, we render a Column 2D chart using
							<span class="codeInline">RenderChart()</span>
							method to show detailed data.</li>
					</ol>
					<p>When you now run the app, you'll see the detailed page as under:
					</p>
				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><img src="Images/Code_Drill.jpg" width="599" height="292" class="imageBorder" />&nbsp;</td>
			</tr>
		</table>
	</body>
</html>
